Step-by-Step Portfolio Worksheet
Techno-Pastel Vision
Student: Helen | Major: Design & Technology | Minor: Fashion Business
Step 1: Develop Your Idea
Purpose of the Site
This digital space is strategically designed to function as more than just a gallery; it is a live demonstration of my multidisciplinary identity as a Design and Technology artist. By integrating my background in Fashion Business, the site aims to bridge the gap between hard-core creative coding and the refined aesthetic sensibilities of high-end fashion. It serves as a personal brand manifest, highlighting my unique ability to craft immersive environments that aren't just seen, but felt.
Problem to Solve
Traditional portfolios often fail to convey the "interactive" essence of a DT student's work. Static grids are insufficient for showcasing game-oriented UX and motion-driven narratives. This site solves that by becoming the environment itself. It allows potential collaborators and employers to experience my decision-making process in real-time—transforming the recruitment process into an engaging digital journey.
Goal
The ultimate objective is to construct a visually ecstatic, responsive, and technologically sophisticated interface. I aim to attract high-tier creative agencies and tech-forward fashion brands by proving I can handle complex front-end logic while maintaining a cohesive, trend-setting visual language.
Step 2: Discovery and Research
Reference 1: MEW (mew.xyz)
What Works Well: The site utilizes a bold, non-conformist brand voice. The "cat in a dog’s world" metaphor is brilliant for memorability. Their use of custom, playful illustrations breaks the monotony of standard web design. The interaction feels expressive and alive, which is exactly the "Game UI" vibe I am pursuing.
Takeaway: Narrative storytelling is the key to standing out. I will adopt a strong visual metaphor to ensure my brand is sticky in the viewer's mind.
Reference 2: Valentines with Alice K
Inspiration: This site is a masterclass in using Pink as a dominant but sophisticated power-color. The dream-like transitions and delicate hover effects create an emotional resonance that I want to replicate. It proves that a "cute" aesthetic can still be professional and technically impressive.
Takeaway: I will use layered gradients and soft-motion physics to create a sense of "digital romance" and technical elegance.
Reference 3: Into The Woods (intothewoods.nl)
Inspiration: The chaotic yet organized maximalism of this site is incredible. It uses depth and layering to create a truly immersive ecosystem. It doesn't feel like a website; it feels like an event.
Takeaway: I want to incorporate floating, interactive elements that react to user movement, making the page feel like a living, breathing digital organism.
Step 3: Target Your Audience
My Primary Audience consists of Creative Directors, UX Leads, and Fashion House Innovation Officers who are hungry for a "Gen-Z" perspective—one that is colorful, culture-aware, and technically fearless. I create for the visionaries who appreciate story-driven artworks and aren't afraid of maximalism. My work speaks to those who value identity, cultural roots, and the intersection of pop-culture and creative technology. The tone is sincere yet imaginative, reflecting a world that is constantly evolving.
Step 4: Inspiration and Concepts
Concept 1: Maximalist Digital Dream
An illustration-heavy, pink-black-neon yellow scheme that feels like a high-end video game interface. It's playful, loud, and unapologetically interactive.
Concept 2: Minimalist Techno-Chic
A refined, typography-focused layout with pixel-art accents. This concept focuses on the "Business" side of my minor, using pink as a sophisticated highlight color rather than a wash.
Step 5 & 6: Sketches & Wireframes
During this phase, I focused on the "Thumbnails to Prototype" pipeline. My sketches prioritize a Floating Navigation System that follows the user's cursor, breaking the traditional top-bar structure. The wireframes ensure that the complexity of the "Pink Maximalism" does not compromise the core usability on mobile devices.
Step 7: Final Comps
The final compositions represent the peak of my visual research. They utilize Glassmorphism (frosted glass effects) to create depth without clutter. The color palette is strictly curated from my research into modern pink web design trends.
Step 8: Reflection
Next Steps for Coding: My immediate priority is refining the CSS variables to match the exact HEX codes of my moodboard. I am also researching JavaScript physics libraries to handle the floating interactive elements I envision for the background.
Potential Challenges: The biggest technical hurdle will be the Custom Cursor. I want it to be more than just an image; I want it to leave a "trail" of pink pixels as the user explores the site. Balancing this animation with site performance is a key challenge.
Excited Outcomes: I am incredibly excited to build a site that isn't just a resume, but a piece of art that truly represents my personality—a blend of Design, Technology, and Fashion Business.